<template>
    <div class="order-cells">
        <el-row class="orders-row" style="margin-bottom:0">
            <el-col :span="8">
                <div class="grid-content bg-grey-light center">Package</div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-grey-light center">Location</div>
            </el-col>
            <el-col :span="3"><div class="grid-content bg-grey-light center">Delivery Date</div></el-col>
            <el-col :span="3"><div class="grid-content bg-grey-light center">AX Status</div></el-col>
            <el-col :span="4"><div class="grid-content bg-grey-light center">Collected Date Confirm</div></el-col>
        </el-row>
        <el-row>
            <el-col :span="24" v-for="(group, t) in orderObj.group" :key="t" style="margin-bottom:0" class="order-group-products">
                <order-product :item="orderObj" :group="group" :home-list="homeList" :show-button="showButton" :idx="t" :location-options="locationOptions" :product-options="productOptions" @change-group="changeGroup"></order-product>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import i18n from '@/lang/index'
import OrderProduct from '@/components/GroupProduct/OrderProduct'
export default {
    name: 'Order-infos',
    components: {
        OrderProduct
    },
    props: {
        locationOptions: Array,
        orderData: Object,
        productOptions: Array,
        homeList: Array,
        showButton: Boolean
    },
    data () {
        return {
            orderObj: {
                group: []
            }
        }
    },
    mounted () {
        this.orderObj = JSON.parse(JSON.stringify(this.orderData))
    },
    watch: {
        orderData: function(val) {
            console.log(val)
            this.orderObj = JSON.parse(JSON.stringify(val))
        }
    },
    methods: {
        changeGroup (data, index) {
            this.orderData.group[index] = data
            // this.ordersObj.assemble[this.idx] = this.orderData
            this.$emit('change-data', this.idx, this.orderData)
        }
    }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.order-cells{
    margin-bottom: 10px;
    .orders-row{
        .bg-grey-light{ text-align: center; background: #e5e9f2;}
    }
}
</style>
